<template>
	<div>
		<div class='prizeDrawSpace'>

		</div>
		<div class="prizeDraw">
			<div class="prizeDraw_top">
				<div class="prizeDraw_top_close">
					<div class class="prizeDraw_top_close_left" @click="recordEvent()">
						<image src="@/static/image/delete.png" mode=""></image>
						推送记录
					</div> 优惠劵 <image src="@/static/image/close.png" mode="" class="closeImg" @click="closeDialog()">
					</image>
				</div>
				<div class="prizeDraw_top_title">
					<input type="text" placeholder="请输入优惠券名称" v-model="from.name" placeholder-class="zj-placeholder-class">
					<div class="inputSeach" @click='couponEvent()' @search='couponEvent'>
						<image src="@/static/image/sousuo.png" mode=""></image>
					</div>
				</div>
				<scroll-view @scrolltolower="scrolltolower" :style="{ height: scrollViewHeight + 'rpx' }" :scroll-y="true"
					:scroll-with-animation="true">
					<div class="couponItems" v-for='(ite, idx) in couponPageList' :key="idx"
						:class="idx == couponPageList.length - 1 ? 'couponItemsLast' : ''">
						<div class="couponItems_cont">
							<div class="couponItems_cont_left">
								<div class="couponItems_cont_left_top">
									<!-- <span>¥</span>10 -->
									<span>{{ ite.reductionStrTwo }}</span>
								</div>
								<div class="couponItems_cont_left_bottom">
									{{ ite.reductionStrOne }}
								</div>
							</div>
							<div class="couponItems_cont_right">
								<div class="couponItems_cont_right_title ex">
									{{ ite.name }}
								</div>
								<div class="couponItems_cont_right_cont">
									<!-- 全部商品可用，允许叠加其他活动 -->{{ ite.targetProductType | targetProductTypeFilter }}
								</div>
								<div class="couponItems_cont_right_time">
									有效期：{{ ite.timeRangeStr }}
								</div>
							</div>
						</div>
						<div class="couponItems_btn">
							<div class="couponItems_btn_left">
								剩余数量： {{ ite.total - ite.recvedNum - ite.frozenNum }}
							</div>
							
							<div class="couponItems_btn_right color_opt" v-if="!ite.isTui">
							   已推送
							</div>
							
							<div class="couponItems_btn_right color_hui" v-if="(ite.total - ite.recvedNum - ite.frozenNum) == 0 && ite.isTui">
							   推送优惠劵
							</div>
							<div class="couponItems_btn_right"  @click='tuiSendRedEvent(ite)' v-if='(ite.total - ite.recvedNum - ite.frozenNum) !== 0 && ite.isTui'>
							   推送优惠劵
							</div>
						<!-- 	
							<div class="couponItems_btn_right"
								:class="(ite.total - ite.recvedNum - ite.frozenNum) == 0 && !ite.isTui? 'color_hui' : 'color_opt'"
								v-if="(ite.total - ite.recvedNum - ite.frozenNum) == 0 || !ite.isTui">
								{{ (ite.total - ite.recvedNum - ite.frozenNum) == 0 && !ite.isTui? '推送优惠劵' : '已推送' }}
							</div> -->
							
							
						<!-- 	<div class="couponItems_btn_right" v-else @click='tuiSendRedEvent(ite)'>
								推送优惠劵
							</div> -->
						</div>
					</div>

					<div class="listSpace" v-if="couponPageList.length <= 0 && loading">
						<list-space></list-space>
					</div>

					<div class="zj_space">

					</div>
				</scroll-view>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	filters: {
		formatDate(v) {
			const value = v * 1000
			const data = new Date(value);
			const month = data.getMonth() + 1;
			const day = data.getDate();
			const year = data.getFullYear();
			const hours = data.getHours();
			const minutes = data.getMinutes();
			const seconds = data.getSeconds();
			const formattedTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			return formattedTime;
		},
		// [CouponTargetProductType.All, '全部商品'],
		// [CouponTargetProductType.Allowlist, '部分商品'],
		// [CouponTargetProductType.Denylist, '部分商品不可用'],
		targetProductTypeFilter(v) {
			var s = ''
			switch (v) {
				case 1:
					s = '全部商品'
					break;
				case 2:
					s = '部分商品'
					break;
				case 3:
					s = '部分商品不可用'
					break;
			}
			return s
		}
	},
	data() {
		return {
			params: {
				page: 1,
				pageSize: 10,
				redPacketId: '1801433329883422720',
				name: '',
				liveId: ''
			},
			couponPageList: [],
			scrollViewHeight: 812,
			total: 0,
			redName: '',
			checkType: 0,
			loading: false,
			from: {
				page: 1,
				pageSize: 10,
				name: '',
				status: 2
			},
			Overview: 0, //直播在线人数
			activitypageList: [],//推送活动列表
		}
	},
	onLoad(opt) {
		if (opt.liveId) {
			this.from.liveId = this.params.liveId = opt.liveId
		}
		this.getRedPacket()
	},
	onPullDownRefresh() {
		this.params.page = 1
		this.couponPageList = []
		this.loading = false
		this.getRedPacket()
	},
	methods: {
		//获取到推送活动列表
		async getActivityList() {
			const params = {
				liveId: this.params.liveId,
				page: 1,
				pageSize: 999
			}
			const {
				data
			} = await this.$request(this.$Api.activityList, params, "get")
			if (data.code != 200) return
			this.activitypageList = data.data.list
			// 对比优惠券是否存在活动
			for (var i in this.couponPageList) {
				for (var k in this.activitypageList) {
					if (this.couponPageList[i].couponId == this.activitypageList[k].couponId) {
						this.couponPageList[i].isTui = false
						this.$set(this.couponPageList[i],'isTui',false)
					} else {
						// this.couponPageList[i].isTui = true
						// this.$set(this.couponPageList[i],'isTui',true)
					}
				}
			}

		},
		closeDialog() {
			this.$utils.closeDialog(this)
			// uni.navigateBack()
		},
		// 搜索
		couponEvent() {
			this.$utils.throttle((res) => {
				this.params.page = 1
				this.couponPageList = []
				this.getRedPacket()
			}, 800)
		},
		scrolltolower(e) {
			if (this.couponPageList.length < this.total) {
				this.params.page++
				this.getRedPacket()
			} else {
				uni.showToast({
					title: '已到底',
					icon: 'none'
				})
			}
			console.log('e.detail.scrollTop', e.detail.scrollTop)
		},
		async getRedPacket() {
			const {
				data
			} = await this.$request(this.$Api.couponList, this.from, "get")
			if (data.code != 200) return
			this.loading = true
			if (!data.data.list) return
			data.data.list.forEach((item) => {
				const reductionStr = item.reductionStr.split('，');
				item.reductionStrOne = reductionStr[0];
				item.reductionStrTwo = reductionStr[1];
				item.isTui = true
			});
			this.couponPageList = this.couponPageList.concat(data.data.list)
			this.total = data.data.total
			uni.stopPullDownRefresh()
			this.getActivityList()//已经推送的列表
		},
		// 中奖名单
		winnersEvemt(ite) {

		},
		backEvent() {
			uni.navigateBack()

		},
		recordEvent() {
			uni.navigateTo({
				url: '/pages/coupon/couponRecord?liveId=' + this.from.liveId
			})
		},
		async getOverviewFun() {
			const {
				data
			} = await this.$request(this.$Api.getOverview, {
				liveId: this.from.liveId
			}, "get")
			this.Overview = data.data.onlineNum
			return data.data
		},
		//推送
		async tuiSendRedEvent(ite) {
			let that = this
			const allNum = ite.total - ite.recvedNum - ite.frozenNum

			uni.showModal({
				title: '提示',
				content: '确定推送优惠劵吗？',
				success: async (res) => {
					console.log('res', res)
					// isSendNotice: 1
					// liveId: "1811377889669554176"
					// orderAmount: 0
					// orderAmountType: 1
					// orderTimeType: 1
					// targetProductItems: []
					// targetProductType: 1
					// total: 1
					// type: 1
					if (res.confirm) {
						// that.from.targetProductItems = []
						// that.from.targetProductType = ite.targetProductType
						// that.from.couponId = ite.couponId
						// that.from.type = 1
						// that.from.isSendNotice = 1
						// delete this.from.name
						const Overview = await this.getOverviewFun()
						var  inviteNum = 0
						if (Number(Overview.onlineNum) >= allNum) {
							inviteNum = Number(allNum)
						} else {
							inviteNum = Number(Overview.onlineNum)
						}
						if (inviteNum == 0) {
							return uni.showToast({
								title: '直播间人数少于1人不可操作',
								icon: 'none'
							})
						}
						const params = {
							couponId: ite.couponId,
							inviteNum:1,
							isSendNotice: 1,
							liveId: that.from.liveId,
							targetProductItems: [],
							targetProductType: ite.targetProductType,
							total: inviteNum,
							type: 1,
							orderAmount: 0,
							orderAmountType: 1,
							orderTimeType: 1,
						}
						const {
							data
						} = await that.$request(that.$Api.activityCreate,params, "post")
						if (data.code !== 200) return
						that.couponEvent()
						uni.showToast({
							title: '操作成功',
							icon: 'none'
						})
					}
				}
			})

		}
	}
}
</script>

<style lang="scss">
.prizeDraw {
	width: 100%;
	height: 992rpx;
	background: #FFFFFF;
	border-radius: 16rpx 16rpx 0rpx 0rpx;
	overflow-y: hidden;
	// position: fixed;
	bottom: 0;
	left: 0;
	color: #464C5B;
	font-size: 28rpx;

	.couponItems {
		display: flex;
		flex-wrap: wrap;
		padding: 32rpx;
		box-sizing: border-box;
		border-bottom: 2rpx solid #D9D9D9;

		.couponItems_cont {
			width: 686rpx;
			height: 160rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			border: 2rpx solid #FFD5D2;
			display: flex;
			clear: both;
			overflow: hidden;

			.couponItems_cont_left {
				width: 160rpx;
				height: 160rpx;
				background: #FFD5D2;
				border-radius: 16rpx 0rpx 0rpx 16rpx;
				font-size: 56rpx;
				color: #FF5A5F;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;

				span {
					font-size: 28rpx;
					font-weight: bold;
				}

				.couponItems_cont_left_top {
					height: 60rpx;
					line-height: 100rpx;
					// font-size: 28rpx;
				}

				.couponItems_cont_left_bottom {
					width: 100%;
					text-align: center;
					font-size: 24rpx;
					height: 34rpx;
					line-height: 34rpx;
					// padding: 0 12rpx;
					// box-sizing: border-box;
					// height: 100%;
					// display: flex;
					// align-items: center;


				}
			}

			.couponItems_cont_right {
				width: 526rpx;
				height: 160rpx;
				background: #fff;
				border-radius: 0rpx 16rpx 16rpx 0rpx;
				padding: 0 14rpx;
				box-sizing: border-box;
				text-align: left;

				.couponItems_cont_right_title {
					font-size: 28rpx;
					color: #464C5B;
					font-weight: 500;
					line-height: 40rpx;
					margin-top: 12rpx;
				}

				.couponItems_cont_right_cont {
					margin-top: 10rpx;
					color: #8C8C8C;
					line-height: 34rpx;
					font-size: 24rpx;
				}

				.couponItems_cont_right_time {
					margin-top: 12rpx;
					color: #8C8C8C;
					line-height: 34rpx;
					font-size: 24rpx;
				}
			}
		}

		.couponItems_btn {
			display: flex;
			justify-content: space-between;
			width: 100%;
			height: 50rpx;
			align-items: center;
			margin-top: 20rpx;

			.couponItems_btn_left {
				color: #8C8C8C;
				line-height: 34rpx;
				font-size: 24rpx;
			}

			.couponItems_btn_right {
				width: 160rpx;
				height: 48rpx;
				background: #295EFF;
				border-radius: 8rpx;
				color: #fff;
				font-size: 24rpx;
				line-height: 48rpx;
				text-align: center;
			}

		}
	}

	.couponItems:first-child {
		padding-top: 0;
	}

	.couponItems:last-child,
	.couponItemsLast {
		border: none !important;
	}



	.prizeDraw_top {
		width: 100%;
		height: 100rpx;
		position: relative;
		text-align: center;
		font-size: 32rpx;
		line-height: 100rpx;

		.prizeDraw_top_close {
			padding: 0 32rpx;
			box-sizing: border-box;
		}


		.prizeDraw_top_close_left {
			position: absolute;
			left: 20rpx;
			top: 10rpx;
			width: auto;
			height: 100rpx;
			color: #295EFF;
			font-size: 24rpx;
			display: flex;
			align-items: center;

			image {
				width: 28rpx;
				height: 28rpx;
				margin-right: 8rpx;
			}
		}


		.closeImg {
			position: absolute;
			right: 32rpx;
			top: 32rpx;
			width: 32rpx;
			height: 32rpx;
		}

	}


	.prizeDraw_top_title {
		width: 100%;
		height: 96rpx;
		font-size: 28rpx;
		color: #464C5B;
		text-align: left;
		font-weight: 500;
		line-height: 64rpx;
		padding: 0 32rpx;
		padding: 0 32rpx;
		box-sizing: border-box;
		position: relative;
		padding-bottom: 32rpx;

		input {
			width: 100%;
			height: 100%;
			border: 1rpx solid #979797;
			border-radius: 16rpx;
			padding: 0 124rpx 0 24rpx;
			box-sizing: border-box;
			font-size: 24rpx;

		}

		.inputSeach {
			width: 32rpx;
			height: 32rpx;
			position: absolute;
			right: 56rpx;
			top: 6rpx;
		}

	}


	.prizeDraw_user_item_top {
		width: 100%;
		height: 110rpx;
		border-bottom: 1rpx solid #D7DDE4;
		display: flex;
		justify-content: flex-start;
		padding: 0 24rpx;
		box-sizing: border-box;
		align-items: center;

		.prizeDraw_user_item_top_left {
			width: 62rpx;
			height: 62rpx;
			margin-right: 16rpx;

			image {
				border-radius: 50%;
			}
		}

	}

	.prizeDraw_items_cont_items {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 40rpx;
		margin-top: 20rpx;
		padding: 0 24rpx;
		box-sizing: border-box;
		font-size: 24rpx;

		color: #8C8C8C;

		.prizeDraw_items_cont_items_left {
			width: 100%;
			display: flex;
			align-items: center;


			.color_blue {
				color: #295EFF;
			}

			.prizeDraw_items_cont_items_cont {
				width: 480rpx;
				text-align: left;
				color: #464C5B;
			}
		}

	}

	.listSpace {
		padding-top: 100rpx;
	}

	.color_hui {
		background: #C8C9CC !important;
	}

	.color_opt {
		opacity: 0.5;
	}
}
</style>
